<template>
  <div class="screen-preview-wrap">
    <div class="container" v-loading="loading">
      <div class="header">
        <el-menu
          class="cover-menu"
          mode="horizontal"
          :default-active="defaultActive"
          @select="(v) => menuChange(v, true)"
        >
          <template v-for="item in menuTree">
            <el-menu-item v-if="item.leaf" :index="item.id" :key="item.id">
              <div class="menu-name">{{ item.name }}</div>
            </el-menu-item>

            <el-submenu
              :index="item.id"
              :key="item.id"
              v-if="!item.leaf"
              popper-class="sub-popper"
            >
              <template slot="title">
                <div class="menu-name">{{ item.name }}</div>
              </template>
              <template v-for="path in item.children">
                <menu-tree-item
                  :index="path.id"
                  :key="path.id"
                  :disabled="path.disabled"
                  :item="path"
                />
              </template>
            </el-submenu>
          </template>
        </el-menu>
        <span class="divided-line" v-if="menuName"></span>
        <div
          class="current-select"
          :style="{ '--theme-color': systemInfo.theme }"
        >
          {{ menuName }}
        </div>
        <full-screen
          id="screenfull"
          class="screen-full-button"
          :domElement="domElement"
        />
      </div>

      <div class="body" id="body" v-loading="isLoading">
        <div class="screen-container">
          <div class="preview-container">
            <Preview
              v-if="configData"
              :configData="configData"
              :id="id"
              isPreview
            ></Preview>

            <div v-if="!configData && !loading" class="el-table__empty-block">
              <span class="el-table__empty-text">
                <div class="table-tooltip">
                  <!--                  <i class="iconfont icon-wushuju"></i>-->
                  <commonIcon
                    iconName="icon-wushuju"
                    iconType="icon"
                    :iconSize="36"
                  ></commonIcon>
                  <span class="tip-content">暂无数据</span>
                </div>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BaseList from "@/mixins/BaseList";
import { formatDate } from "@/utils";
// import ViewBoardIndex from "../screenConfig/viewBoard/components/mixin/ViewBoardIndex";
import FullScreen from "@/components/Screenfull";
import { getInfo, getAllTree } from "@/api/screenConfig/viewboard";
import Preview from "../screenConfig/viewBoard/components/components/preview";
import { mapGetters } from "vuex";
import commonIcon from "@/components/CommonIcon";
import MenuTreeItem from "./components/menuTreeItem.vue";
export default {
  name: "",
  mixins: [BaseList],
  components: { Preview, commonIcon, MenuTreeItem, FullScreen },
  props: {},
  data() {
    return {
      isMenu: false,
      menuName: "",
      menuTree: [],
      instance: null,
      timeout: undefined,
      selectMenu: null,
      period: null, // 时间周期
      isLoading: false,
      loading: false,
      defaultActive: "0",
      configData: null,
      id: "",
      domElement: null,
    };
  },
  computed: {
    ...mapGetters(["systemInfo"]),
  },
  mounted() {
    this.queryAllTree();
  },
  methods: {
    /**
     * 数据初始化
     * @param id
     */
    initData(id) {
      this.isLoading = true;
      this.id = id;
      getInfo({ id })
        .then((res) => {
          if (res && res.code === 200) {
            this.menuName = res.data.name;
            try {
              this.configData = JSON.parse(res.data.chartConfig);
            } catch (e) {
              console.err("转换异常: ", e);
              this.configData = null;
            }
          } else {
            this.$GlobalErrorConfirm("获取数据失败", res.msg, "重新加载").then(
              () => {
                this.initData(id);
              }
            );
          }
        })
        .finally(() => (this.isLoading = false));
    },

    /**
     * 获取菜单分类数据
     */
    queryAllTree() {
      this.domElement = document.getElementById("body");
      this.loading = true;
      getAllTree({ status: 0 })
        .then((res) => {
          if (res && res.code === 200) {
            this.menuTree = [
              {
                id: "1",
                name: "预定义", // 名称
                isDefault: 1, // 1 预定义 0 自定义
                leaf: false, // false 分类 true 数据集
                isRoot: true,
                children: res.data.filter((item) => item.isDefault === 1),
              },
              {
                id: "0",
                name: "自定义",
                isDefault: 0,
                leaf: false,
                isRoot: true,
                children: res.data.filter((item) => item.isDefault === 0),
              },
            ];
            if (this.menuTree[1].children.length == 0) {
              this.menuChange(this.menuTree[0].children[0].id);
            }
            this.setNoData(this.menuTree);
            this.id = this.getLeafData(this.menuTree);
            if (this.id) this.menuChange(this.id);
          } else {
            this.menuTree = [];
            this.handleListTips(res);
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },

    setNoData(data) {
      data.forEach((f, index) => {
        if (!f.leaf && f.children.length === 0) {
          f.children[0] = {
            leaf: true,
            disabled: true,
            isNoData: true,
            name: "暂无数据",
            id: index.toString(),
          };
        } else if (f.children && f.children.length > 0 && !f.leaf) {
          this.setNoData(f.children);
        }
      });
    },
    /**
     * 获取满足条件的第一条数据
     */
    getLeafData(data) {
      let id = "";
      if (data.length > 0) {
        try {
          data.forEach((f) => {
            if (f.leaf && !f.isNoData) {
              id = f.id;
              throw Error();
            } else if (f.children && f.children.length && !f.isNoData) {
              id = this.getLeafData(f.children);
            }
          });
        } catch {}
      }
      return id;
    },
    /**
     * 点击弹框菜单获取数据
     * @param v
     */
    menuChange(v) {
      this.defaultActive = v;
      if (this.IsTrueById(v)) {
        this.initData(v);
      }
    },
    /**
     * 根据id判断当前节点类型是否为组件
     * @params id
     * @params data
     * @return {boolean}
     */
    IsTrueById(id, data) {
      let list = data ? data : this.menuTree,
        isTrue = false;
      if (list.length > 0) {
        list.forEach((f) => {
          if (f.id === id && f.leaf) {
            id = f.id;
            isTrue = true;
          } else if (!isTrue && f.children && f.children.length) {
            isTrue = this.IsTrueById(id, f.children);
          }
        });
      }
      return isTrue;
    },
  },
  beforeDestroy() {
    // this.clearInstance()
  },
};
</script>

<style lang="scss" scoped>
.screen-preview-wrap {
  width: calc(100% + 16px) !important;
  margin: -8px 0 0 -8px;
  height: 100%;
  background-color: #fff;
  .container {
    height: 100%;
  }

  .header {
    height: 50px;
    width: 100%;
    // border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 12px;
    line-height: 50px;
    .title-wrap {
      color: #303133;
      cursor: pointer;
      user-select: none;

      .title {
        margin-left: 4px;
      }
    }
    .divided-line {
      border-left: 1px #909399 solid;
      height: 20px;
      margin-left: 15px;
    }

    ::v-deep .sub-popper .menu-name {
      width: 100%;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      max-width: 200px;
    }

    .current-select {
      width: calc(100% - 270px);
      margin-left: 15px;
      color: var(--theme-color);
      font-size: 14px;
    }
    .screen-full-button {
      width: 32px;
      height: 32px;
      line-height: 32px;
      text-align: center;
    }
    ::v-deep .el-menu.el-menu--horizontal {
      border-bottom: 0;
    }
    ::v-deep .el-menu--horizontal > .el-submenu .el-submenu__title {
      height: 50px !important;
      line-height: 50px !important;
    }
    ::v-deep .el-menu--horizontal > .el-submenu .el-submenu__title div {
      height: 48px !important;
    }
    ::v-deep .el-menu--horizontal > .el-submenu .el-submenu__icon-arrow {
      margin-top: -1px !important;
    }
    .menu {
      width: 100%;
      height: 100%;
      overflow-y: scroll;
      overflow-x: hidden;
      position: absolute;
      top: 0;
      transition: left 0.15s linear;
      background-color: #fff;
      z-index: 9999;
    }

    .menu-show {
      left: 0;
    }

    .menu-hidden {
      left: -200px;
    }

    .cover-menu {
      height: 100%;
      border-right: 0 !important;
      user-select: none;

      ::v-deep .el-submenu__title {
        display: flex;
        align-items: center;

        // .carousel-text-warp {
        //   width: calc(100% - 24px);
        // }
      }

      .cover-menu-item {
        display: flex;
        align-items: center;
      }

      .el-menu-item {
        display: flex;
        align-items: center;
      }

      ::v-deep .carousel-name-info-show,
      ::v-deep .basic-name-item {
        vertical-align: baseline !important;
      }
    }
  }

  .body {
    height: calc(100% - 50px);
    width: 100%;
    position: relative;
    overflow-x: hidden;
    background: #eee;
    .screen-container {
      width: 100%;
      height: 100%;
      padding: 8px;
      box-sizing: border-box;

      .preview-container {
        height: 100%;
        overflow-y: scroll;
      }
      .el-table__empty-block {
        min-height: 60px;
        height: 100%;
        text-align: center;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;

        .el-table__empty-text {
          width: 50%;
          color: #909399;
          font-size: 12px;
          .table-tooltip {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;

            .icon-wushuju {
              font-size: 40px;
              line-height: 40px;
            }

            .tip-content {
              line-height: 32px;
            }
          }
        }
      }
    }
  }
}
</style>

<style lang="scss">
.sub-popper .el-menu-item.is-disabled {
  opacity: 0.5 !important;
}
</style>
